<template>
<div id="app">
    <transition name="fade">
        <router-view class="router-view" />
    </transition>
</div>
</template>

<script>
export default {
    name: 'app',
    components: {}
}
</script>

<style lang="scss">
body {
    margin: 0px;
    padding: 0px;
    /*background: url(assets/bg1.jpg) center !important;

background-size: cover;*/
    background: #012547;

    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

#app {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    //background:url(assets/bg.jpg) #7EA0C3 bottom repeat-x;
}

.router-view {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
    height: 100%;
    will-change: transform;
    transition: all500ms;
    position: absolute;
    backface-visibility: hidden;
    perspective: 1000;
}

.slide-right-enter,
.slide-right-enter-active {
    animation: bounce-left-in500ms;
}

.slide-right-leave-active {
    animation: bounce-left-out500ms;
}

.slide-left-enter,
.slide-left-enter-active {
    animation: bounce-right-in500ms;
}

.slide-left-leave-active {
    animation: bounce-right-out500ms;
}

@keyframesbounce-right-in {
    0% {
        transform: translate3d(100%, 0, 0);
    }

    100% {
        transform: translate3d(0px, 0, 0);
    }
}

@keyframesbounce-right-out {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframesbounce-left-in {
    0% {
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        transform: translate3d(0px, 0, 0);
    }
}

@keyframesbounce-left-out {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(100%, 0, 0);
    }
}

/*
#app {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;

    .router-view {
        position: absolute;
    }

    .fade-enter-active {
        animation: bounce-in .3s;
    }

    .fade-leave-active {
        animation: bounce-out .3s;
    }

    @keyframes bounce-in {
        0% {
            transform: translate3d(-100%, 0, 0);
        }

        25% {
            transform: translate3d(-75%, 0, 0);
        }

        50% {
            transform: translate3d(-50%, 0, 0);
        }

        75% {
            transform: translate3d(-25%, 0, 0);
        }

        100% {
            transform: translate3d(0px, 0, 0);
        }
    }

    @keyframes bounce-out {
        0% {
            transform: translate3d(0, 0, 0);
        }

        25% {
            transform: translate3d(25%, 0, 0);
        }

        50% {
            transform: translate3d(50%, 0, 0);
        }

        75% {
            transform: translate3d(75%, 0, 0);
        }

        100% {
            transform: translate3d(100%, 0, 0);
        }
    }
}

*/

.el-submenu [class^=fa] {
    vertical-align: baseline;
    margin-right: 10px;
}

.el-menu-item [class^=fa] {
    vertical-align: baseline;
    margin-right: 10px;
}

.toolbar {
    background: #f2f2f2;
    padding: 10px;
    //border:1px solid #dfe6ec;
    margin: 10px 0px;

    .el-form-item {
        margin-bottom: 10px;
    }
}

.fade-enter-active,
.fade-leave-active {
    transition: all .2s ease;
}

.fade-enter,
.fade-leave-active {
    opacity: 0;
}
</style>
